<template>
  <div class="home">
    <h3>访问state中数据</h3>
    <div>直接获取 {{ $store.state.numA }}</div>
    <div>从data中获取 {{cnumA}}</div>
    <div>从计算属性中获取{{getNumA}}</div>
    <div>通过辅助函数获取{{numA}} {{persons}}</div>
    <h3>访问getters中的数据</h3>
    <div>直接获取{{ $store.getters.fmtNumA }}</div>
    <div>通过辅助函数获取 {{ fmtNumA }}</div>
    <button @click="add">添加人</button>
    <button @click="add2">添加人</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState,mapActions } from "vuex";

export default {
  name: 'HomeView',
  data() {
    return {
      cnumA: this.$store.state.numA,
    };
  },
  computed: {
    ...mapState(["numA","persons"]),
    ...mapGetters(["fmtNumA"]),
    getNumA() {
      return this.$store.state.numA;
    }
  },
  methods: {
    ...mapMutations(["addPerson"]),
    ...mapActions(["asyncAddPerson"]),
    add() {
      // 方式一：commit(方式名,参数) 触发mutations
      // this.$store.commit('addPerson',{ name:"wang" ,age:25 })
      // 方式二： 辅助函数 mapMutations
      this.addPerson({ name: "sun" ,age:25 });
    },
    add2(){
      // 方式一：
      // this.$store.dispatch("asyncAddPerson", {
      //   name:"zhao",age: 25
      // })
      // 方式二:
      this.asyncAddPerson({name: "liu",age:35});
    }
  }
}
</script>
